<template>
    <view class="empty-container">
        <view class="empty-image">
            <image class="bg" mode="widthFix" :src="light_image"></image>
            <view class="content">
                <tm-text _class="text-weight-b" :font-size="40" color="#444444" label="祈福明灯"></tm-text>
                <tm-text :font-size="28" color="rgba(102, 102, 102, 1)" label="问事问物问人，心诚则灵"></tm-text>
                <ImageButton @click="wishModalShow = true" :image="vip_btn_image">
                    <tm-text :font-size="32" color="#FFECB8" label="我要许愿"></tm-text>
                </ImageButton>
            </view>
        </view>
    </view>
    <WishModal v-model:show="wishModalShow" />
</template>
<script setup lang="ts">
    import { ref } from "vue";
    import light_image from "/static/assets/images/blessings/light.png";
    import vip_btn_image from '/static/assets/images/index/btn-vip.png'
    import ImageButton from '@/components/ImageButton/index.vue'
    import WishModal from '../WishModal/WishModal.vue'

    const wishModalShow = ref(false);
</script>
<style lang="less" scoped>
    .empty-container {
        width: 100%;
        height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--navbar-height) - var(--tabbar-height));
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .empty-image {
        position: relative;
        z-index: 0;
    }

    .bg {
        width: 580rpx;
    }

    .content {
        padding-top: 16rpx;
        padding-bottom: 16rpx;
        position: absolute;
        z-index: 1;
        bottom: 0;
        width: 100%;
        background: linear-gradient(300deg, #FEFDF9 0%, rgba(255, 253, 250, 0) 100%);
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .image-button {
            width: 290rpx;
            height: 80rpx;
            margin-top: 60rpx;
        }
    }
</style>